<template>
  <div class="showFilter">
    <h1>人员列表</h1>
    <input type="text" v-model="MyList" />
    <ul>
      <li v-for="(p, index) in Libiao2" :key="index">
        {{ p.name }} - {{ p.age }} - {{ p.gender }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "FilterMode",
  data() {
   return {
      MyList:'',
    Libiao : [
      { name: "马冬梅", age: 19, gender: "女" },
      { name: "周冬雨", age: 18, gender: "女" },
      { name: "邓超", age: 22, gender: "男" },
      { name: "邓伦", age: 18, gender: "男" },
    ],
    Libiao2 : []
   }
  },
  watch:{
    MyList:{
        immediate:true,
        handler(val){
            const renming = this.Libiao.filter((Libiao)=>{
                return Libiao.name.indexOf(val) != -1
            })
            this.Libiao2 = renming
        }
    }
  }
};
</script>

<style>
.showFilter {
  background-color: pink;
  padding: 20px;
}
</style>
